layui.use(['table', 'jquery', 'form', ], function() {
    var idCardUitl = {
        getBirthday: function(idCard) {
            return idCard.substring(6, 10) + '-' + idCard.substring(10, 12) + '-' + idCard.substring(12, 14);
        },
        getAge: function(idCard) {
            let date = new Date();
            let age = date.getFullYear() - idCard.substring(6, 10) - 1;
            let month = date.getMonth() + 1;
            if (idCard.substring(10, 12) < month || idCard.substring(10, 12) == month && idCard.substring(10, 12) <= date.getDate()) {
                age++;
            }
            return age;
        },
        getGender: function(idCard) {
            return idCard.substr(16, 1) % 2 == 1 ? 1 : 0;
        },
    };
    var table = layui.table,
        $ = layui.jquery,
        form = layui.form;
    var server = '';
    // var addOrUpdate = 'add';
    $.getJSON("./res/serverconfig.json",
        function(data, textStatus, jqXHR) {
            server = data.protocol + data.domain + data.port + data.context;
            // server = data.protocol + data.domain + data.context;
            window.console.log(server);
            sessionStorage.setItem('server', server);
        }
    ).false;
    server = sessionStorage.getItem('server');
    // 获取部门编号
    let deptId = queryDeptsByUUID(server);
    sessionStorage.setItem('deptId', deptId);
    queryEmps(deptId, server);
    // 点击左侧部门列表获取部门ID并异步查询该部门下员工简略信息列表
    // $("#deptlist").click("li", function(e) {
    $("#deptlist").on("click", "li", function(e) {
        // window.console.log(this.id)
        // window.console.log($(this).index());
        // window.console.log(e.target.id);
        // window.console.log($(this).attr("id"));
        // 获取部门ID
        // let deptId = this.id;
        // 移除所有除自己以外的所有layui-this样式
        $(this).siblings().removeClass('layui-this');
        // 给自己添加layui-this样式
        $(this).addClass('layui-this');
        // 获取部门id
        let deptId = $(this).attr("id");
        // 查询当前部门的员工列表
        sessionStorage.setItem('deptId', deptId);
        // 调用queryEmps(deptId, $url)方法获取该部门下员工简略信息列表
        queryEmps(deptId, server);
    });
    /**
     * 传入操作者唯一标识符调用ajax异步查询部门列表
     * @param {*} requestUrl 
     */
    function queryDeptsByUUID(requestUrl) {
        let deptId = 0;
        $.ajax({
            type: "get",
            url: requestUrl + "clazz/list",
            async: false,
            dataType: "json",
            success: (responseText) => {
                // window.console.log(responseText)
                switch (responseText.code) {
                    case "200":
                        // 数据查询成功
                        // 如果正常途径查询并将该员工已经被分配部门在显示部门列表
                        let id = 0;
                        // 把部门列表存入sessionStorage
                        sessionStorage.setItem('depts', JSON.stringify(responseText.data));
                        $.each(responseText.data, (index, element) => {
                            // 遍历部门列表将部门名称循环在指定位置追加
                            if (index == 0) {
                                deptId = element.id;
                                // 默认第一个是被选中的状态
                                $("#deptlist").append('<li class="layui-nav-item layui-this" id="' + element.id + '"><a lay-href="javascript:;" id="' + element.id + '">' + element.name + '</a></li>');
                                // $("#deptlist").append('<li class="layui-nav-item"><a href="javascript:;" data-id="' + element.id + '" data-title="' + element.name + '" data-url="index.php?&a=adminList" class="site-demo-active" data-type="tabAdd">' + element.name + '</a></li>');
                            } else {
                                $("#deptlist").append('<li class="layui-nav-item" id="' + element.id + '"><a lay-href="javascript:;" id="' + element.id + '">' + element.name + '</a></li>');
                            }
                        });
                        break;

                    default:
                        $("#deptlist").append("<li>数据接口访问异常</li>");
                        break;
                }
            },
            error: () => {
                $("#deptlist").append("<li>数据接口访问异常</li>");
            }
        });
        return deptId;
    }
    /**
     * 查询该部门下员工列表
     * @param {*} deptId 
     * @param {*} server 
     * @param {*} param 查询参数对象 
     */
    function queryEmps(deptId, server, param) {
        // 声明对象存储查询条件
        let url = server + "student/query4layui/" + deptId;
        let navs = $("#deptlist").children('li');
        if (deptId == 0) {
            // 在所有班级内查询 清空样式
            $.each(navs, function(indexInArray, valueOfElement) {
                $(valueOfElement).removeClass('layui-this');
            });
        } else {
            // 查询某个班级 使左侧导航被选中
            $.each(navs, function(indexInArray, valueOfElement) {
                if ($(valueOfElement).attr('id') == deptId) {
                    $(valueOfElement).addClass('layui-this');
                } else {
                    $(valueOfElement).removeClass('layui-this');
                }
            });
        }

        table.render({
            // 异步请求时携带的参数
            where: param,
            checkbox: true,
            elem: '#empList',
            height: 'full-160',
            url: url,
            toolbar: '#toolbarDemo', //开启头部工具栏，并为其绑定左侧模板
            defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义，去除该参数即可
                title: '提示',
                layEvent: 'LAYTABLE_TIPS',
                icon: 'layui-icon-tips'
            }],
            page: {
                first: '首页',
                prev: '上一页',
                next: '下一页',
                last: '末页'
            },
            limit: 10,
            limits: [5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 100],
            cols: [
                [ //表头
                    {
                        title: '勾选',
                        type: 'checkbox',
                        align: 'center'
                    },
                    { title: '序号', type: 'numbers', align: 'center' },
                    { field: 'id', title: 'ID', hide: true },
                    { field: 'firstName', title: '曾用名', align: 'center' },
                    { field: 'lastName', title: '现用名', align: 'center' },
                    {
                        field: 'idCard',
                        title: '性别',
                        align: 'center',
                        templet: function(data) {
                            if (data.idCard == null || data.idCard == '') {
                                return '未绑定身份证';
                            } else {
                                return idCardUitl.getGender(data.idCard) == 1 ? "男" : "女";
                            }
                        }
                    }, {
                        field: 'idCard',
                        title: '年龄',
                        align: 'center',
                        templet: function(data) {
                            if (data.idCard == null || data.idCard == '') {
                                return '未绑定身份证';
                            } else {
                                return idCardUitl.getAge(data.idCard);
                            }
                        }
                    }, {
                        field: 'idCard',
                        title: '出生日期',
                        align: 'center',
                        templet: function(data) {
                            if (data.idCard == null || data.idCard == '') {
                                return '未绑定身份证';
                            } else {
                                return idCardUitl.getBirthday(data.idCard);
                            }
                        }
                    },
                    { field: 'mobile', title: '手机号', align: 'center' },
                    {
                        field: 'clazzName',
                        title: '班级',
                        align: 'center',
                        templet: function(data) {
                            return data.clazz.name;
                        }
                    },
                ]
            ],
            text: {
                none: '我也是有底线的' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
        });
        // 表头渲染部门下拉列表
        $('#search_cid').empty();
        // 创建Option对象并赋值
        let option = new Option('选择班级', 0);
        $('#search_cid').append(option);
        let depts = JSON.parse(sessionStorage.getItem('depts'));
        $.each(depts, function(indexInArray, valueOfElement) {
            // 创建Option对象并赋值
            let option = new Option(valueOfElement.name, valueOfElement.id);
            // 向Option对象增加属性值
            // option.setAttribute('selected', 'selected');
            // 向页面输出
            $('#search_cid').append(option);
        });
        // 重新渲染表单
        form.render("select");
    }

    //监听头工具栏事件
    table.on('toolbar(empList)', function(obj) {
        var checkStatus = table.checkStatus(obj.config.id);
        let data = checkStatus.data;
        switch (obj.event) {
            case 'add':
                addOrUpdate = 'add';
                layer.open({
                    type: 1,
                    content: $('#add'),
                    title: '添加人员',
                    area: ['660px', '380px'],
                    closeBtn: 2,
                    shadeClose: true,
                    success: function(layero, index) {
                        $('#add_title').text('添加人员');
                        // 新增人员渲染部门下拉列表
                        $('#cid').empty();
                        // 创建Option对象并赋值
                        let depts = JSON.parse(sessionStorage.getItem('depts'));
                        $.each(depts, function(indexInArray, valueOfElement) {
                            // 创建Option对象并赋值
                            let option = new Option(valueOfElement.name, valueOfElement.id);
                            // 向Option对象增加属性值
                            // option.setAttribute('selected', 'selected');
                            // 向页面输出
                            $('#cid').append(option);
                        });
                        //表单赋值
                        form.val('add', {
                            "firstName": '',
                            "lastName": '',
                            "idCard": '',
                            "authText": '123456',
                            "repassword": '123456',
                            "mobile": '',
                        });
                        // 重新渲染表单
                        form.render("select");
                        //监听提交
                        form.on('submit(formAdd)', function(data) {
                            // 按钮禁用
                            $('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                            // layer.alert(JSON.stringify(data.field), {
                            //     title: '最终的提交信息'
                            // });
                            // window.console.log(data.field);
                            // layer.close(index);
                            // return false;
                            deptId = data.field.cid;
                            if (deptId != 0) {
                                $.ajax({
                                    type: "put",
                                    url: server + "student/add",
                                    data: data.field,
                                    dataType: "json",
                                    // 发送cookie
                                    // xhrFields: {
                                    //     withCredentials: true
                                    // },
                                    // 支持ajax跨域
                                    // crossDomain: true,
                                    // 请求发送前
                                    beforeSend: function() {
                                        // 发送请求前，可以对data、url等处理
                                        layer.msg('正在提交，请稍后...', {
                                            icon: 16,
                                            shade: 0.01
                                        });
                                    },
                                    // 请求返回
                                    complete: function() {
                                        // 返回数据，根据数据调转页面等
                                    },
                                    success: function(response) {
                                        // window.console.log(response);
                                        switch (response.code) {
                                            case "200":
                                                sessionStorage.setItem('deptId',deptId );
                                                layer.msg(response.msg, {
                                                    icon: 1
                                                });
                                                queryEmps(deptId, server);
                                                setTimeout(() => {
                                                    layer.close(index);
                                                }, 1000);
                                                $('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                break;
                                            case "49999":
                                                layer.msg('数据异常，可能手机号已经被使用', {
                                                    icon: 5
                                                });
                                                $('#mobile').focus();
                                                $('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                break;

                                            default:
                                                $('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                                break;
                                        }
                                    }
                                });
                            }else{
                                layer.msg('请选择班级', {
                                    icon: 5
                                });
                            }
                            return false;
                        });
                    }
                });
                break;
            case 'edit':
                if (data.length == 0) {
                    layer.msg('未选择任何数据');
                } else {
                    layer.open({
                        type: 1,
                        content: $('#add'),
                        title: '详细信息',
                        area: ['660px', '380px'],
                        success: function(layero, index) {
                            $('#add_title').text('修改信息');
                            let id = data[0].id;
                            $.ajax({
                                type: 'get',
                                url: server + "student/getStudentById/" + id,
                                dataType: "json",
                                success: function(response) {
                                    switch (response.code) {
                                        case '200':
                                            let student = response.data;
                                            window.console.log(student);
                                            let depts = JSON.parse(sessionStorage.getItem('depts'));
                                            $('#cid').empty();
                                            $.each(depts, function(indexInArray, valueOfElement) {
                                                // 创建Option对象并赋值
                                                let option = new Option(valueOfElement.name, valueOfElement.id);
                                                if (valueOfElement.id == student.cid) {
                                                    // 向Option对象增加属性值
                                                    option.setAttribute('selected', 'selected');
                                                }
                                                // 向页面输出
                                                $('#cid').append(option);
                                            });

                                            form.val('add', {
                                                "firstName": student.firstName,
                                                "lastName": student.lastName,
                                                "idCard": student.idCard,
                                                "mobile": student.mobile,
                                                "authText": student.authText,
                                                "repassword": student.authText,
                                            });
                                            // 重新渲染表单
                                            form.render("select");

                                            break;

                                        default:
                                            break;
                                    }
                                }
                            });
                            //监听提交
                            form.on('submit(formAdd)', function(data) {
                                // layer.alert(JSON.stringify(data.field), {
                                //     title: '最终的提交信息'
                                // });
                                // layer.close(index);
                                // return false;
                                // if (data.field.cid != 0) {
                                //     sessionStorage.setItem('deptId', deptId);
                                // }
                                let deptId = data.field.cid;
                                let updateData = data.field;
                                updateData.id = id;
                                $.ajax({
                                    type: "put",
                                    url: server + "student/update",
                                    data: updateData,
                                    dataType: "json",
                                    // 发送cookie
                                    // xhrFields: {
                                    //     withCredentials: true
                                    // },
                                    // 支持ajax跨域
                                    // crossDomain: true,
                                    // 请求发送前
                                    beforeSend: function() {
                                        // 发送请求前，可以对data、url等处理
                                        layer.msg('正在提交，请稍后...', {
                                            icon: 16,
                                            shade: 0.01
                                        });
                                    },
                                    // 请求返回
                                    complete: function() {
                                        // 返回数据，根据数据调转页面等
                                    },
                                    success: function(response) {
                                        switch (response.code) {
                                            case "200":
                                                layer.msg(response.msg, {
                                                    icon: 1
                                                });
                                                sessionStorage.setItem('deptId',deptId)
                                                queryEmps(deptId, server);
                                                setTimeout(() => {
                                                    layer.close(index);
                                                }, 1000);
                                                break;
                                            case "49999":
                                                layer.msg('数据异常，可能手机号已经被使用', {
                                                    icon: 5
                                                });
                                                $('#mobile').focus();
                                                break;

                                            default:
                                                break;
                                        }
                                    }
                                });
                                return false;
                            });
                        },
                        closeBtn: 2,
                        shadeClose: true,
                    });
                }
                break;
            case 'del':
                if (data.length == 0) {
                    layer.msg('未选择任何数据');
                } else {
                    layer.prompt({
                        formType: 1,
                        title: '请输入密码，确认删除',
                    }, function(value, index) {
                        let ids = new Array();
                        data.forEach(student => {
                            ids.push(student.id);
                        });
                        layer.close(index);
                        $.ajax({
                            type: "delete",
                            url: server + "student/del/",
                            async: false,
                            contentType: 'application/json;charset=utf-8;',
                            data: JSON.stringify(ids),
                            dataType: "json",
                            beforeSend: function() {
                                // 发送请求前，可以对data、url等处理
                                layer.msg('正在删除，请稍后...', {
                                    icon: 16,
                                    shade: 0.01
                                });
                            },
                            success: function(response) {
                                switch (response.code) {
                                    case '200':
                                        layer.msg(response.msg, {
                                            icon: 1
                                        });
                                        let deptId = sessionStorage.getItem('deptId');
                                        queryEmps(deptId, server);
                                        break;

                                    default:
                                        layer.msg(response.msg, {
                                            icon: 5
                                        });
                                        break;
                                }
                            }
                        });
                    });
                }
                break;

                //自定义头工具栏右侧图标 - 提示
            case 'info':
                if (data.length == 0) {
                    layer.msg('未选择任何数据');
                } else {
                    layer.open({
                        type: 1,
                        content: $('#info'),
                        title: '详细信息',
                        area: ['660px', '330px'],
                        success: function(layero, index) {
                            // console.log(layero, index);
                            //表单赋值
                            form.val('info', {
                                "clazzName": data[0].clazz.name,
                                "firstName": data[0].firstName,
                                "lastName": data[0].lastName,
                                "idCard": data[0].idCard,
                                "mobile": data[0].mobile,
                                "close": idCardUitl.getGender(data[0].idCard) == 1 ? true : false,
                                "age": idCardUitl.getAge(data[0].idCard),
                                "birthday": idCardUitl.getBirthday(data[0].idCard),
                            });
                        },
                        closeBtn: 2,
                        shadeClose: true,
                    });

                }
                break;
            case 'echarts':
                layer.open({
                    type: 1,
                    content: $('#echarts_box'),
                    title: '详细信息',
                    area: ['1280px', '480px'],
                    success: function(layero, index) {
                        cid = sessionStorage.getItem('deptId');
                        // 班级性别百分比
                        percent(server + 'student/queryPercent4Gender/' + cid, 'gender_box');
                        // 所有学生性别百分比
                        percent(server + 'student/queryPercent4Gender/' + 0, 'computer_box');

                    },
                    closeBtn: 2,
                    shadeClose: true,
                });

                break;

            case 'LAYTABLE_TIPS':
                //自定义头工具栏右侧图标 - 提示
                let qrcode = window.document.querySelector('#qrcode');
                qrcode.src = sessionStorage.getItem('server') + 'qrcode/bilibili';
                layer.open({
                    type: 1,
                    title: false,
                    closeBtn: 0,
                    area: ['auto'],
                    skin: 'layui-layer-nobg', //没有背景色
                    shadeClose: true,
                    content: $('#qrcode')
                });
                //表单赋值
                form.val('info', {
                    "firstName": data[0].firstName,
                    "lastName": data[0].lastName,
                    "idCard": data[0].idCard,
                    "mobile": data[0].mobile,
                    "gender": idCardUitl.getGender(data[0].idCard) == 1 ? '精神小伙儿' : '扒蒜小妹儿',
                    "age": idCardUitl.getAge(data[0].idCard),
                    "birthday": idCardUitl.getBirthday(data[0].idCard),
                    "password": data[0].password,
                    "uuid": data[0].uuid,
                });
                break;
        };
    });
    // 百分比函数
    function percent(url, el) {
        var myChart = echarts.init(document.getElementById(el));
        /*
            如果数据加载时间较长，一个空的坐标轴放在画布上也会让用户觉得是不是产生 bug 了，
            因此需要一个 loading 的动画来提示用户数据正在加载。
            ECharts 默认有提供了一个简单的加载动画。
            只需要调用 showLoading 方法显示。数据加载完成后再调用 hideLoading 方法隐藏加载动画。
        */
        myChart.showLoading();

        // 使用刚指定的配置项和数据显示图表。
        //  myChart.setOption(option);
        // 异步加载数据
        $.ajax({
            type: "get",
            url: url,
            dataType: "json",
            success: function(response) {
                // 隐藏数据加载动画效果
                myChart.hideLoading();
                // 使用刚指定的配置项和数据显示图表。
                myChart.setOption({
                    tooltip: {
                        trigger: 'item',
                        formatter: '{a} <br/>{b}: {c} ({d}%)'
                    },
                    legend: {
                        orient: 'vertical',
                        left: 10,
                        data: response.genderList
                    },
                    series: [{
                        name: '访问来源',
                        type: 'pie',
                        radius: ['50%', '70%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: '30',
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: response.percentList
                    }]
                });
            }
        });
    }
    // 自定义规则表达式
    form.verify({
        mobile: [
            /^1[3456789]\d{9}$/, '请输入正确的手机号码'
        ],

    });
    // 异步验证手机号是否可用
    $("#mobile").keyup(function(e) {
        let url = server + "student/mobileExists/" + $('#mobile').val();
        if ('add' == addOrUpdate) {}

        // window.console.log(e);
        // 获取手机号
        let mobile = $.trim($("#mobile").val());
        if (mobile.length > 11) {
            mobile = mobile.substring(0, 11);
            $("#mobile").val(mobile);
        }
        // window.console.log(account);
        // 定义账号规则表达式
        let mobileRex = /^1[3456789]\d{9}$/;
        if (mobile.length == 11) {
            if (mobileRex.test(mobile)) {
                // 符合规则的账号进行ajax异步验证
                $.ajax({
                    type: "get",
                    url: url,
                    dataType: "json",
                    // 发送cookie
                    // xhrFields: {
                    //     withCredentials: true
                    // },
                    // 支持ajax跨域
                    // crossDomain: true,
                    // 请求发送前
                    beforeSend: function() {
                        // 发送请求前，可以对data、url等处理
                        layer.msg('验证中', {
                            icon: 16,
                            shade: 0.01
                        });
                    },
                    // 请求返回
                    complete: function() {
                        // 返回数据，根据数据调转页面等
                    },
                    success: function(responseText) {
                        // window.console.log(responseText);
                        let msg = responseText.msg;
                        switch (responseText.code) {
                            case "50001":
                                layui.use(['layer', 'jquery'], function() {
                                    let layer = layui.layer;
                                    let $ = layui.jquery;
                                    layer.open({
                                        type: 4,
                                        content: [msg, $('#mobile')],
                                        shade: 0,
                                        tips: [2]
                                    });
                                });
                                // 按钮禁用
                                $('#formAdd').addClass("layui-btn-disabled").attr("disabled", true);
                                break;
                            case "50002":
                                layui.use(['layer', 'jquery'], function() {
                                    let layer = layui.layer;
                                    let $ = layui.jquery;
                                    layer.msg('该手机号可以使用', {
                                        icon: 1
                                    });
                                });
                                // 恢复按钮
                                $('#formAdd').removeClass("layui-btn-disabled").attr("disabled", false);
                                break;

                            default:
                                break;
                        }

                    }
                });
            } else {
                // 不符合预定义规则的账号提示
                layui.use(['layer', 'jquery'], function() {
                    let layer = layui.layer;
                    let $ = layui.jquery;
                    layer.tips('请输入正确的手机号码', '#mobile');
                });

            }
        }
    });

    //监听按条件查询
    form.on('submit(formSearch)', function(data) {
        // window.alert(JSON.stringify(data.field));
        sessionStorage.setItem('deptId', data.field.cid);
        queryEmps(data.field.cid, sessionStorage.getItem('server'), data.field)
        return false
    });
    // 输入曾用名自动填入现用名
    $('#firstName').keyup(function(e) {
        $('#lastName').val($.trim($('#firstName').val()));
    });
});